<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:360px;
            height:400px;
            border:1px solid red;
            margin:0 auto;
        }
        #box .top{
            height:60px;
            background: yellow;
        }
        #box .top div{
            width:120px;
            height:60px;
            background: black;
            color:white;
            font:bold 32px/60px "微软雅黑";
            text-align: center;
            float:left;
        }
        #box .top div.active{
            background: crimson;
        }
        #box .content{
            height:340px;
            position:relative;
        }
        #box .content div{
            position:absolute;
            top:0;
            left:0;
            height:340px;
            width:360px;
            background: chartreuse;
            text-align: center;
            line-height: 340px;
            font-size:148px;
            color:white;
            display: none;
        }
        #box .content .red{
            background: red;
        }
        #box .content .blue{
            background: blue;
        }
        #box .content .green{
            background: green;
        }
        #box .content .active{
            display: block;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="top">
        <div class="active">红色</div>
        <div>蓝色</div>
        <div>绿色</div>
    </div>
    <div class="content">
        <div class="red active">红色</div>
        <div class="blue">蓝色</div>
        <div class="green">绿色	</div>
    </div>
</div>
<script src="../jquery-1.7.2.min.js"></script>
<script>

    $(function(){
        $('#box .top div').click(function(){
//            console.log($(this).index());
//            $(this).addClass('active').siblings().removeClass('active');
//            $('#box .content div').eq($(this).index()).show().siblings().hide();
            $(this).addClass('active').siblings().removeClass('active').closest('#box').find('.content div').eq($(this).index()).show().siblings().hide();
// 找到点击这个元素添加 active（属性里面有属性值),找到其他的兄弟元素,删除它们的 active 属性   .然后找到最近的父级单位, 找到他的子集单位 content 下面的 div 找到你所点击的元素的下标序列号 让他对应的盒子显示,再找到其他的熊德元素,让它们消失
        })
    })
























</script>






























</body>
</html>
